<template>
  <div class="reportFormPage">
    <TopOperation ref="TopOperation" :tabs-list="tabList" :active-val.sync="activeVal" @currentActive="currentActive"
      @reportFormsSubmit="reportFormsSubmit" @printSpecificPart="onPrintSpecificPart" />
    <div ref="printView" v-loading="modPagesLodding">
      <!--   干筛法 -->
      <div v-show="activeVal === 'cjlsfgsfjlb'" v-for="(item, index) in excelTypeMap['cjlsfgsfjlb']"
        :key="'cjlsfgsfjlb' + index">
        <CjlsfgsfjlbTable ref="cjlsfgsfjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjlsfgsfjlbTable" />
      </div>
      <!--   水筛法 -->
      <div v-show="activeVal === 'cjlsfssfjlb'" v-for="(item, index) in excelTypeMap['cjlsfssfjlb']"
        :key="'cjlsfssfjlb' + index">
        <CjlsfssfjlbTable ref="cjlsfssfjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjlsfssfjlbTable" />
      </div>
      <!--   粗集料密度、吸水率试验检测记录表（网篮法）混凝土用 -->
      <div v-show="activeVal === 'cjlmdxslwlfhntyjlb'" v-for="(item, index) in excelTypeMap['cjlmdxslwlfhntyjlb']"
        :key="'cjlmdxslwlfhntyjlb' + index">
        <CjlmdxslwlfhntyjlbTable ref="cjlmdxslwlfhntyjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjlmdxslwlfhntyjlbTable" />
      </div>
      <!--   粗集料密度、吸水率试验检测记录表（网篮法）沥青用 -->
      <div v-show="activeVal === 'cjlmdxslwlflqyjlb'" v-for="(item, index) in excelTypeMap['cjlmdxslwlflqyjlb']"
        :key="'cjlmdxslwlflqyjlb' + index">
        <CjlmdxslwlflqyjlbTable ref="cjlmdxslwlflqyjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjlmdxslwlflqyjlbTable" />
      </div>
      <!--   洛杉矶磨耗 -->
      <div v-show="activeVal === 'cjllsjmhjlb'" v-for="(item, index) in excelTypeMap['cjllsjmhjlb']"
        :key="'cjllsjmhjlb' + index">
        <CjllsjmhjlbTable ref="cjllsjmhjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjllsjmhjlbTable" />
      </div>
      <!--   压碎值 -->
      <div v-show="activeVal === 'cjlyszgbjlb'" v-for="(item, index) in excelTypeMap['cjlyszgbjlb']"
        :key="'cjlyszgbjlb' + index">
        <CjlyszgbjlbTable ref="cjlyszgbjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjlyszgbjlbTable" />
      </div>
      <!--   坚固性,软弱颗粒 -->
      <div v-show="activeVal === 'cjljgxrrkljlb'" v-for="(item, index) in excelTypeMap['cjljgxrrkljlb']"
        :key="'cjljgxrrkljlb' + index">
        <CjljgxrrkljlbTable ref="cjljgxrrkljlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjljgxrrkljlbTable" />
      </div>
      <!--   含泥量,针片状颗粒 -->
      <div v-show="activeVal === 'cjlhnlzpzjlb'" v-for="(item, index) in excelTypeMap['cjlhnlzpzjlb']"
        :key="'cjlhnlzpzjlb' + index">
        <CjlhnlzpzjlbTable ref="cjlhnlzpzjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjlhnlzpzjlbTable" />
      </div>
      <!--   针片状颗粒含量、黏附性、0.075mm以下 -->
      <div v-show="activeVal === 'cjlzpznfxjlb'" v-for="(item, index) in excelTypeMap['cjlzpznfxjlb']"
        :key="'cjlzpznfxjlb' + index">
        <CjlzpznfxjlbTable ref="cjlzpznfxjlb" :excel-id="item" :syType="form.syType" :page="index"
          @backBgzFun="backBgzFunCjlzpznfxjlbTable" />
      </div>
      <!--   矿质混合料 -->
      <div v-show="activeVal === 'cjlkzhhljlb'" v-for="(item, index) in excelTypeMap['cjlkzhhljlb']"
        :key="'cjlkzhhljlb' + index">
        <CjlkzhhljlbTable ref="cjlkzhhljlb" :excel-id="item" :syType="form.syType" :page="index" />
      </div>
      <!--   报告-路面用 -->
      <div v-show="activeVal === 'cjllmysybg'" v-for="(item, index) in excelTypeMap['cjllmysybg']"
        :key="'cjllmysybg' + index">
        <CjllmysybgTable ref="cjllmysybg" :excel-id="item" :syType="form.syType" :page="index"
          :obtain-form="obtainFormCjllmysybgTable" />
      </div>
      <!--   报告-无机结合料用 -->
      <div v-show="activeVal === 'cjlwjjhlysybg'" v-for="(item, index) in excelTypeMap['cjlwjjhlysybg']"
        :key="'cjlwjjhlysybg' + index">
        <CjlwjjhlysybgTable ref="cjlwjjhlysybg" :excel-id="item" :syType="form.syType" :page="index"
          :obtain-form="obtainFormCjlwjjhlysybgTable" />
      </div>
      <!--   报告-水泥混凝土用 -->
      <div v-show="activeVal === 'cjlsnhntysybg'" v-for="(item, index) in excelTypeMap['cjlsnhntysybg']"
        :key="'cjlsnhntysybg' + index">
        <CjlsnhntysybgTable ref="cjlsnhntysybg" :excel-id="item" :syType="form.syType" :page="index"
          :obtain-form="obtainFormCjlsnhntysybgTable" />
      </div>
      <!--   报告-矿质混合料 -->
      <div v-show="activeVal === 'cjlkzhhlbg'" v-for="(item, index) in excelTypeMap['cjlkzhhlbg']"
        :key="'cjlkzhhlbg' + index">
        <CjlkzhhlbgTable ref="cjlkzhhlbg" :excel-id="item" :syType="form.syType" :page="index" />
      </div>
    </div>
    <backtop-view :sum="activeVal ? excelTypeMap[activeVal].length : 1" @onModPages="onModPages" />
    <statement-select-view ref="statementSelectView" :data-list="tabList" @onShowPreview="onShowPreview" />
    <statement-select-dialog ref="statementSelectDialog" />
  </div>
</template>

<script>
import Bus from "@/utils/bus";
import store from "@/store";
import { bsDataReportModPages, bsDataReportTb, getBsDataReport } from "@/api/syrw/bsDataReport";
import StatementSelectView from "@/views/reportForms/components/StatementSelectView.vue";
import StatementSelectDialog from "@/views/reportForms/components/StatementSelectDialog.vue";
export default {
  name: "index",
  data () {
    return {
      modPagesLodding: false,
      reportId: undefined,
      tabList: [],
      form: {
        syType: "",
        excelTypeList: {}
      },
      excelTypeMap: [],
      activeVal: "",
      obtainFormCjllmysybgTable: {}, // 报告-路面用
      obtainFormCjlwjjhlysybgTable: {}, // 报告-无机结合料
      obtainFormCjlsnhntysybgTable: {} // 报告-水泥混凝土
    };
  },
  components: {
    TopOperation: () => import("@/views/reportForms/components/topOperation"), // tab页
    BacktopView: () => import("@/views/reportForms/components/backtopView"), // 回到顶部页
    CjlsfgsfjlbTable: () => import("@/views/reportForms/jl/cjl/cjlsfgsfjlbTable"), //  干筛法
    CjlsfssfjlbTable: () => import("@/views/reportForms/jl/cjl/cjlsfssfjlbTable"), // 水筛法
    CjlmdxslwlfhntyjlbTable: () => import("@/views/reportForms/jl/cjl/cjlmdxslwlfhntyjlbTable"), // 粗集料密度、吸水率试验检测记录表（网篮法）混凝土用
    CjlmdxslwlflqyjlbTable: () => import("@/views/reportForms/jl/cjl/cjlmdxslwlflqyjlbTable"), // 粗集料密度、吸水率试验检测记录表（网篮法）沥青用
    CjllsjmhjlbTable: () => import("@/views/reportForms/jl/cjl/cjllsjmhjlbTable"), // 洛杉矶磨耗
    CjlyszgbjlbTable: () => import("@/views/reportForms/jl/cjl/cjlyszgbjlbTable"), // 压碎值
    CjljgxrrkljlbTable: () => import("@/views/reportForms/jl/cjl/cjljgxrrkljlbTable"), // 坚固性,软弱颗粒
    CjlhnlzpzjlbTable: () => import("@/views/reportForms/jl/cjl/cjlhnlzpzjlbTable"), // 含泥量,针片状
    CjlzpznfxjlbTable: () => import("@/views/reportForms/jl/cjl/cjlzpznfxjlbTable"), // 针片状,黏附性
    CjlkzhhljlbTable: () => import("@/views/reportForms/jl/cjl/cjlkzhhljlbTable"), // 矿质混合料
    CjllmysybgTable: () => import("@/views/reportForms/jl/cjl/cjllmysybgTable"), // 报告-路面用
    CjlwjjhlysybgTable: () => import("@/views/reportForms/jl/cjl/cjlwjjhlysybgTable"), // 报告-无机结合料用
    CjlsnhntysybgTable: () => import("@/views/reportForms/jl/cjl/cjlsnhntysybgTable"), // 报告-水泥混凝土用
    CjlkzhhlbgTable: () => import("@/views/reportForms/jl/cjl/cjlkzhhlbgTable"), // 报告-矿质混合料
    StatementSelectView,
    StatementSelectDialog
  },
  watch: {
    'activeVal' (val) {
      this.reportFormsSubmit(false);
    }
  },
  created () {
    if (this.$route.query) {
      this.reportId = this.$route.query.reportId;
    }
    this.init();
  },
  mounted () {
    // 填充特殊符号
    Bus.$on("setCharacter", (data) => {
      const { focusInput, page } = store.state.reportForms;
      this.$refs[this.activeVal][page].form[focusInput] = (this.$refs[this.activeVal][page].form[focusInput] || "") + data;
    });
  },
  beforeDestroy () {
    // 停止监听事件
    Bus.$off("setCharacter");
  },
  methods: {
    // 获取记录表和报告表
    async init () {
      if (this.reportId) {
        getBsDataReport(this.reportId).then((response) => {
          this.form = response.data;
          this.tabList = [];
          this.excelTypeMap = [];
          if (!this.form.excelTypeList || this.form.excelTypeList.length == 0) {
            this.form.excelTypeList.push({
              val: undefined,
              name: undefined
            });
            this.tabList = this.form.excelTypeList;
          } else {
            this.form.excelTypeList.forEach((item) => {
              if (this.excelTypeMap.hasOwnProperty(item.label)) {
                this.excelTypeMap[item.label].push(item.excelId);
              } else {
                this.excelTypeMap[item.label] = [item.excelId];
                this.tabList.push({
                  val: item.label,
                  name: item.excelTypeName
                });
              }
            });
          }
          this.activeVal = this.tabList[0].val;
          // this.currentActive(this.activeVal)
        });
      } else {
        this.$message.error("报告id不能为空");
      }
    },
    currentActive (val) {
      this.activeVal = val;
    },
    // 加一页减一页
    async onModPages (modType) {
      this.modPagesLodding = true;
      // 1先保存
      await this.reportFormsSubmit();
      // 2 加减页
      await this.doModPages(modType);
      // 3 重新加载
      await this.init();
      // 4 刷新
      this.tabList.forEach((item) => {
        const refList = this.excelTypeMap[item.val];
        if (!refList || refList.length <= 0) {
          return;
        }
        refList.forEach((element, index) => {
          if (this.$refs[item.val] && this.$refs[item.val][index]) {
            this.$refs[item.val][index].init();
          }
        });
      });
      this.modPagesLodding = false;
    },
    // 批量提交
    async reportFormsSubmit (hasTips = true) {
      let arr = [];
      this.tabList.forEach((item) => {
        const refList = this.excelTypeMap[item.val];
        if (!refList || refList.length <= 0) {
          return;
        }
        refList.forEach((element, index) => {
          if (this.$refs[item.val] && this.$refs[item.val][index]) {
            let info = this.$refs[item.val][index].submitForm();
            arr.push({ label: item.val, excelObj: info });
          }
        });
      });
      await bsDataReportTb(arr);
      if (hasTips) {
        this.$modal.msgSuccess("操作成功");
      }
    },
    // 加减页
    async doModPages (modType) {
      const arr = this.excelTypeMap[this.activeVal];
      const data = {
        reportId: this.reportId,
        label: this.activeVal,
        modType: modType,
        excelId: Number(modType) < 0 ? arr[arr.length - 1] : undefined
      };
      await bsDataReportModPages(data);
    },
    // 选择报表
    onPrintSpecificPart () {
      this.$refs.statementSelectView.init();
    },
    //预览
    onShowPreview (tableList) {
      if (!tableList || tableList.length <= 0) {
        return;
      }
      let arr = [];
      this.form.excelTypeList.forEach((item) => {
        if (tableList.includes(item.label)) {
          arr.push({ label: item.label, excelId: item.excelId, syType: this.form.syType, typeSort: item.excelIndex });
        }
      });
      this.$refs.statementSelectDialog.init(arr);
    },
    // 洛杉矶磨耗-报告引入值
    backBgzFunCjllsjmhjlbTable (val) {
      this.$set(this.obtainFormCjllmysybgTable, "backBgzFunCjllsjmhjlbTableVal", val); // 报告-路面用
      this.$set(this.obtainFormCjlwjjhlysybgTable, "backBgzFunCjllsjmhjlbTableVal", val); // 报告-无机结合料
    },
    // 压碎值-报告引入值
    backBgzFunCjlyszgbjlbTable (val) {
      this.$set(this.obtainFormCjllmysybgTable, "backBgzFunCjlyszgbjlbTableVal", val); // 报告-路面用
      this.$set(this.obtainFormCjlwjjhlysybgTable, "backBgzFunCjlyszgbjlbTableVal", val); // 报告-无机结合料
      this.$set(this.obtainFormCjlsnhntysybgTable, "backBgzFunCjlyszgbjlbTableVal", val); // 报告-水泥混凝土
    },
    // 密度吸水率混凝土用-报告引入值
    backBgzFunCjlmdxslwlfhntyjlbTable (val) {
      this.$set(this.obtainFormCjlwjjhlysybgTable, "backBgzFunCjlmdxslwlfhntyjlbTableVal", val); // 报告-无机结合料
      this.$set(this.obtainFormCjlsnhntysybgTable, "backBgzFunCjlmdxslwlfhntyjlbTableVal", val); // 报告-水泥混凝土
    },
    // 密度吸水率沥青用-报告引入值
    backBgzFunCjlmdxslwlflqyjlbTable (val) {
      this.$set(this.obtainFormCjllmysybgTable, "backBgzFunCjlmdxslwlflqyjlbTableVal", val); // 报告-路面用
    },
    // 含泥量针片状-报告引入值
    backBgzFunCjlhnlzpzjlbTable (val) {
      this.$set(this.obtainFormCjlwjjhlysybgTable, "backBgzFunCjlhnlzpzjlbTableVal", val); // 报告-无机结合料
      this.$set(this.obtainFormCjlsnhntysybgTable, "backBgzFunCjlhnlzpzjlbTableVal", val); // 报告-水泥混凝土
    },
    // 水筛法-报告引入值
    backBgzFunCjlsfssfjlbTable (val) {
      this.$set(this.obtainFormCjlwjjhlysybgTable, "backBgzFunCjlsfssfjlbTableVal", val); // 报告-无机结合料
      this.$set(this.obtainFormCjllmysybgTable, "backBgzFunCjlsfssfjlbTableVal", val); // 报告-路面用
    },
    // 干筛法-报告引入值
    backBgzFunCjlsfgsfjlbTable (val) {
      this.$set(this.obtainFormCjlsnhntysybgTable, "backBgzFunCjlsfgsfjlbTableVal", val); // 报告-水泥混凝土
    },
    // 针片状黏附性-报告引入值
    backBgzFunCjlzpznfxjlbTable (val) {
      this.$set(this.obtainFormCjllmysybgTable, "backBgzFunCjlzpznfxjlbTableVal", val); // 报告-路面用
    },
    // 坚固性-报告引入值
    backBgzFunCjljgxrrkljlbTable (val) {
      this.$set(this.obtainFormCjllmysybgTable, "backBgzFunCjljgxrrkljlbTableVal", val); // 报告-路面用
      this.$set(this.obtainFormCjlsnhntysybgTable, "backBgzFunCjljgxrrkljlbTableVal", val); // 报告-水泥混凝土
    }
  }
};
</script>

<style scoped lang="scss">
//@import url('~@/views/reportForms/style/reportForm.scss');</style>
